<template>
  <svg aria-hidden="true" :style="{ width: size + 'px', height: size + 'px' }" class="icon">
    <use :xlink:href="fontClass" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
import { computed } from "vue";

defineOptions({
  name: "Icon"
});

const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  color: {
    type: String
  },
  size: {
    type: String,
    default: "16"
  }
});

const fontClass = computed(() => "#icon-" + props.icon);
</script>

<style></style>
